<template>
  <el-menu
    :default-active="currentPath"
    background-color="#24292f"
    text-color="#fff"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
    router
  >
    <el-menu-item
      :index="route.path"
      v-for="route in $router.options.routes"
      :key="route.path"
    > {{route.title}}</el-menu-item>
  </el-menu>
</template>

<script>
import { defineComponent, computed } from "vue";
import {useRoute} from 'vue-router'
export default defineComponent({
  setup() {
    const route = useRoute();
    const currentPath = computed(() => route.path);

    const handleSelect = (key, keyPath) => {
      console.log(key, keyPath);
    };

    return {
      currentPath,
      handleSelect
    };
  }
});
</script>

<style>
.el-menu-item {
  font-size: 18px;
}
</style>